<template>
	<view class="login-container">
		<!-- 顶部装饰 -->
		<view class="decorations">
			<view class="circle circle-1"></view>
			<view class="circle circle-2"></view>
			<view class="circle circle-3"></view>
		</view>
		
		<!-- 管理员登录入口 -->
		<view class="admin-login-entry" @tap="goToAdminLogin">
			<text class="admin-login-text">管理员登录</text>
			<text class="admin-login-icon">👤</text>
		</view>
		
		<!-- 顶部logo -->
		<view class="logo-box">
			<image :src="wxUserInfo.avatarUrl || '/static/logo.png'" mode="aspectFit" class="logo-img"></image>
			<text class="logo-title">{{ wxUserInfo.nickName ? `Hi，${wxUserInfo.nickName}！` : 'Hi，欢迎回来！' }}</text>
			<text class="logo-subtitle">登录你的账户，开始新的旅程</text>
		</view>
		
		
		<!-- 微信小程序专用登录表单 -->
		<view class="login-form wechat-only-form">
			
			
			<!-- 微信快捷登录按钮 -->
			<button class="wechat-login-btn wechat-primary-btn" @tap="handleWxLoginDirectly" :disabled="isLoading || !isAgreed">
				<view class="wechat-icon">
					<image src="/static/wechat-icon.svg" mode="aspectFit" class="wechat-icon-img"></image>
				</view>
				<text class="wechat-text">微信快捷登录</text>
			</button>

			<!-- 社区合约勾选 -->
			<view class="agreement-box">
				<view class="checkbox-wrapper" @tap="toggleAgreement">
					<view class="checkbox" :class="{'checkbox-checked': isAgreed}">
						<text v-if="isAgreed" class="checkbox-icon">✓</text>
					</view>
				</view>
				<view class="agreement-text">
					我已阅读并同意
					<text class="agreement-link" @tap="showAgreement">《使用合约》</text>
				</view>
			</view>
			
		</view>
		
		<!-- 使用合约弹窗 -->
		<view v-if="showAgreementPopup" class="custom-popup-mask" @tap.self="closeAgreement">
			<view class="agreement-popup">
				<view class="agreement-popup-title">使用合约</view>
				<scroll-view scroll-y="true" class="agreement-popup-content">
					<view class="agreement-popup-text">
						<view class="agreement-section">
							<view class="agreement-section-title">一、服务说明</view>
							<view class="agreement-section-content">
								1.1 本产品为定制开发及相关服务平台，用户可通过本平台提交需求、下单、管理订单等。<br>
								1.2 用户应确保所提交信息真实、合法、有效。
							</view>
						</view>
						<view class="agreement-section">
							<view class="agreement-section-title">二、用户义务</view>
							<view class="agreement-section-content">
								2.1 用户不得利用本平台从事违法违规活动。<br>
								2.2 用户应妥善保管账户信息，因自身原因造成的损失由用户自行承担。<br>
								2.3 用户应尊重平台及他人合法权益，不得发布侵权、违法、低俗等内容。
							</view>
						</view>
						<view class="agreement-section">
							<view class="agreement-section-title">三、隐私与数据</view>
							<view class="agreement-section-content">
								3.1 平台依法保护用户隐私，未经许可不向第三方披露用户信息。<br>
								3.2 平台可能收集必要的使用数据以优化服务体验。
							</view>
						</view>
						<view class="agreement-section">
							<view class="agreement-section-title">四、免责声明</view>
							<view class="agreement-section-content">
								4.1 因不可抗力或第三方原因导致的服务中断、数据丢失等，平台不承担责任。<br>
								4.2 用户因违反本合约造成的损失由用户自行承担。
							</view>
						</view>
					</view>
				</scroll-view>
				<view class="agreement-popup-btns">
					<button class="agreement-popup-btn" @tap="closeAgreement">关闭</button>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
import { ref, getCurrentInstance, onMounted } from 'vue'
import { apiBaseUrl } from '../../store/index'

const { proxy } = getCurrentInstance()
const baseUrl = apiBaseUrl

const formData = ref({
	username: '',
	password: ''
})

const isLoading = ref(false)
const wxUserInfo = ref({})
const isAgreed = ref(false)
const showAgreementPopup = ref(false)
const isWechatMiniProgram = ref(false)

// 调试相关
const showDebug = ref(false)
const debugLogs = ref([])

// 添加调试日志
const addDebugLog = (message) => {
	const timestamp = new Date().toLocaleTimeString()
	debugLogs.value.push(`[${timestamp}] ${message}`)
	console.log(`[DEBUG] ${message}`)
}

// 清除调试日志
const clearDebugLogs = () => {
	debugLogs.value = []
}

// 检测平台环境
const detectPlatform = () => {
	// #ifdef MP-WEIXIN
	isWechatMiniProgram.value = true
	addDebugLog('检测到微信小程序环境')
	// #endif
	
	// #ifndef MP-WEIXIN
	isWechatMiniProgram.value = false
	addDebugLog('非微信小程序环境')
	// #endif
}

// 跳转到管理员登录页面
const goToAdminLogin = () => {
	uni.navigateTo({
		url: '/pages/login/admin-login'
	})
}

// 切换协议同意状态
const toggleAgreement = () => {
	isAgreed.value = !isAgreed.value
}

// 显示协议弹窗
const showAgreement = () => {
	showAgreementPopup.value = true
}

// 关闭协议弹窗
const closeAgreement = () => {
	showAgreementPopup.value = false
}

// 页面加载时检查是否有已存储的微信用户信息
onMounted(() => {
	detectPlatform()
	const storedUserInfo = uni.getStorageSync('wx-user-info')
	if (storedUserInfo) {
		wxUserInfo.value = storedUserInfo
		addDebugLog(`已获取到存储的微信用户信息: ${JSON.stringify(storedUserInfo)}`)
	}
})

const handleLogin = () => {
	if (!formData.value.username || !formData.value.password) {
		uni.showToast({
			title: '请输入用户名和密码',
			icon: 'none'
		})
		return
	}
	
	if (!isAgreed.value) {
		uni.showToast({
			title: '请先同意使用合约',
			icon: 'none'
		})
		return
	}
	
	isLoading.value = true
	
	// 使用全局API基础URL
	uni.request({
		url: `${baseUrl}/user/login`,
		method: 'POST',
		data: formData.value,
		success: async (res) => {
			if (res.data.code === 200) {
				// 存储token
				console.log(res.data)
				uni.setStorageSync('sa-token', res.data.data.tokenValue)
				uni.showToast({
					title: '登录成功',
					icon: 'success'
				})
				
				setTimeout(() => {
					uni.navigateTo({
						url: '/pages/index/index'
					});
				}, 1500)

			} else {
				uni.showToast({
					title: res.data.msg || '登录失败',
					icon: 'none'
				})
			}
		},
		fail: () => {
			uni.showToast({
				title: '网络错误',
				icon: 'none'
			})
		},
		complete: () => {
			isLoading.value = false
		}
	})
}

// 直接处理微信登录
const handleWxLoginDirectly= () => {
	if (!isAgreed.value) {
		uni.showToast({
			title: '请先同意使用合约',
			icon: 'none'
		})
		return
	}
	
	uni.login({
		provider: 'weixin',
		success: (res) => {
			console.log(res.code)
			uni.request({
				url: `${baseUrl}/user/wx-login`,
				method: 'POST',
				data: res.code,
				success: (res) => {
					console.log(res)
					if(res.data.code === 200){
						uni.setStorageSync('sa-token', res.data.data.tokenValue)
						uni.showToast({
							title: '登录成功',
							icon: 'success'
						})
						setTimeout(() => {
							uni.redirectTo({
								url: '/pages/index/index'
							})
						}, 1500)
					}else{
						uni.showToast({
							title: res.data.msg || '登录失败',
							icon: 'none'
						})
					}
				},
				fail: () => {
					uni.showToast({
						title: '网络错误',
						icon: 'none'
					})
				},
				complete: () => {
					isLoading.value = false
				}
			})
		}
	});
};

</script>

<style>
/* 暗黑+紫色高科技风格 */
.login-container {
	padding: 60rpx 40rpx;
	min-height: 100vh;
	background: linear-gradient(135deg, #18122B 0%, #120C1C 100%);
	position: relative;
	overflow: hidden;
}

/* 装饰性元素 */
.decorations {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 0;
}
.circle {
	position: absolute;
	border-radius: 50%;
}
.circle-1 {
	width: 300rpx;
	height: 300rpx;
	background: linear-gradient(45deg, #7B2FF2, #F357A8);
	top: -100rpx;
	right: -50rpx;
	opacity: 0.18;
}
.circle-2 {
	width: 200rpx;
	height: 200rpx;
	background: linear-gradient(45deg, #7B2FF2, #10AEFF);
	top: 200rpx;
	left: -100rpx;
	opacity: 0.12;
}
.circle-3 {
	width: 150rpx;
	height: 150rpx;
	background: linear-gradient(45deg, #A259FF, #F357A8);
	bottom: 100rpx;
	right: 100rpx;
	opacity: 0.10;
}

/* 管理员登录入口 */
.admin-login-entry {
	position: absolute;
	top: 40rpx;
	right: 40rpx;
	background: rgba(40, 20, 60, 0.8);
	padding: 15rpx 25rpx;
	border-radius: 30rpx;
	display: flex;
	align-items: center;
	box-shadow: 0 4rpx 10rpx #7B2FF244;
	z-index: 10;
	backdrop-filter: blur(5px);
	transition: all 0.3s;
}
.admin-login-entry:active {
	transform: scale(0.95);
}
.admin-login-text {
	font-size: 24rpx;
	color: #A259FF;
	font-weight: 500;
	margin-right: 8rpx;
}
.admin-login-icon {
	font-size: 28rpx;
}

.logo-box {
	display: flex;
	flex-direction: column;
	align-items: center;
	margin-bottom: 60rpx;
	position: relative;
	z-index: 1;
}
.logo-img {
	width: 160rpx;
	height: 160rpx;
	margin-bottom: 20rpx;
	border-radius: 50%;
	box-shadow: 0 8rpx 20rpx #7B2FF244;
	background: #18122B;
}
.logo-title {
	font-size: 42rpx;
	color: #fff;
	font-weight: bold;
	margin-bottom: 10rpx;
	letter-spacing: 2rpx;
}
.logo-subtitle {
	font-size: 26rpx;
	color: #B8B8D1;
}

.login-form {
	padding: 40rpx;
	background: rgba(24, 18, 43, 0.92);
	border-radius: 20rpx;
	box-shadow: none;
	position: relative;
	z-index: 1;
	backdrop-filter: blur(8px);
	border: 1px solid #2D1457;
}
.input-group {
	display: flex;
	align-items: center;
	padding: 25rpx 30rpx;
	background-color: #1E1532;
	border-radius: 40rpx;
	margin-bottom: 30rpx;
	transition: all 0.3s;
	border: 2rpx solid #2D1457;
}
.input-group:focus-within {
	border-color: #A259FF;
	box-shadow: 0 0 10rpx #A259FF44;
}
.input-group .iconfont {
	font-size: 40rpx;
	color: #A259FF;
	margin-right: 20rpx;
}
.input-field {
	flex: 1;
	font-size: 28rpx;
	color: #fff;
	background: transparent;
}

/* 社区合约勾选样式 */
.agreement-box {
	display: flex;
	align-items: center;
	margin-top: 20rpx;
	padding: 0 10rpx;
}
.checkbox-wrapper {
	padding: 10rpx;
}
.checkbox {
	width: 36rpx;
	height: 36rpx;
	border: 2rpx solid #A259FF;
	border-radius: 6rpx;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: all 0.2s;
	background: #18122B;
}
.checkbox-checked {
	background-color: #A259FF;
	border-color: #A259FF;
}
.checkbox-icon {
	color: #fff;
	font-size: 24rpx;
	font-weight: bold;
}
.agreement-text {
	font-size: 26rpx;
	color: #B8B8D1;
	margin-left: 10rpx;
}
.agreement-link {
	color: #A259FF;
	text-decoration: underline;
}

.login-btn {
	width: 100%;
	height: 90rpx;
	background: linear-gradient(45deg, #7B2FF2, #F357A8);
	color: #fff;
	font-size: 32rpx;
	border-radius: 30rpx;
	margin-top: 40rpx;
	box-shadow: 0 8rpx 20rpx #7B2FF244;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: all 0.3s;
	margin-bottom: 30rpx;
	border: none;
}
.login-btn:active {
	transform: scale(0.98);
	box-shadow: 0 4rpx 10rpx #A259FF44;
}
.login-btn[disabled] {
	opacity: 0.5;
	background: linear-gradient(45deg, #3A1C71, #7B2FF2);
}

.wechat-login-btn, .wechat-primary-btn {
	width: 100%;
	height: 90rpx;
	background: linear-gradient(45deg, #7B2FF2, #10AEFF);
	color: #fff;
	font-size: 32rpx;
	border-radius: 30rpx;
	box-shadow: 0 8rpx 20rpx #7B2FF244;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: all 0.3s;
	position: relative;
	border: none;
}
.wechat-login-btn:active, .wechat-primary-btn:active {
	transform: scale(0.98);
	box-shadow: 0 4rpx 10rpx #10AEFF44;
}
.wechat-login-btn[disabled], .wechat-primary-btn[disabled] {
	opacity: 0.5;
	background: linear-gradient(45deg, #3A1C71, #7B2FF2);
}

.wechat-primary-btn {
	height: 120rpx !important;
	font-size: 36rpx !important;
	margin-top: 60rpx !important;
	background: linear-gradient(45deg, #7B2FF2, #10AEFF) !important;
	box-shadow: 0 12rpx 30rpx #7B2FF244 !important;
}

.wechat-only-form .wechat-icon-img {
	width: 50rpx !important;
	height: 50rpx !important;
}
.wechat-only-form .wechat-text {
	font-size: 36rpx !important;
	font-weight: 500 !important;
}
.wechat-only-form {
	padding: 60rpx 40rpx !important;
}
.wechat-only-form .agreement-box {
	margin-bottom: 40rpx !important;
}

.wechat-icon {
	margin-right: 10rpx;
}
.wechat-icon-img {
	width: 40rpx;
	height: 40rpx;
}
.wechat-text {
	font-size: 32rpx;
}

.options-box {
	display: flex;
	justify-content: space-between;
	margin-top: 30rpx;
	padding: 0 20rpx;
}
.register-link, .forget-pwd {
	font-size: 26rpx;
	color: #A259FF;
	transition: color 0.3s;
}
.register-link:active, .forget-pwd:active {
	color: #F357A8;
}

/* 社区合约弹窗样式 */
.custom-popup-mask {
	position: fixed;
	top: 0;
	left: 0;
	width: 100vw;
	height: 100vh;
	background: rgba(24,18,43,0.85);
	z-index: 999;
	display: flex;
	justify-content: center;
	align-items: center;
}
.agreement-popup {
	width: 600rpx;
	background-color: #18122B;
	border-radius: 20rpx;
	overflow: hidden;
	box-shadow: 0 10rpx 30rpx #7B2FF244;
}
.agreement-popup-title {
	font-size: 32rpx;
	font-weight: bold;
	text-align: center;
	padding: 30rpx 0;
	border-bottom: 1rpx solid #2D1457;
	color: #A259FF;
}
.agreement-popup-content {
	padding: 30rpx;
	max-height: 700rpx;
}
.agreement-popup-text {
	font-size: 26rpx;
	color: #B8B8D1;
	line-height: 1.6;
}
.agreement-section {
	margin-bottom: 30rpx;
}
.agreement-section-title {
	font-weight: bold;
	margin-bottom: 10rpx;
	color: #A259FF;
}
.agreement-section-content {
	color: #B8B8D1;
	padding-left: 20rpx;
}
.agreement-popup-btns {
	display: flex;
	border-top: 1rpx solid #2D1457;
}
.agreement-popup-btn {
	flex: 1;
	height: 90rpx;
	line-height: 90rpx;
	text-align: center;
	font-size: 30rpx;
	color: #A259FF;
	background-color: #18122B;
	border-radius: 0;
	border: none;
}
.agreement-popup-btn:after {
	border: none;
}

/* 调试区域 */
.debug-area {
	margin-top: 30rpx;
	background: #18122B;
	border-radius: 10rpx;
	border: 1px solid #2D1457;
	overflow: hidden;
}
.debug-title {
	background: #18122B;
	padding: 10rpx 20rpx;
	font-size: 24rpx;
	color: #A259FF;
	display: flex;
	justify-content: space-between;
	align-items: center;
}
.debug-close {
	font-size: 32rpx;
	padding: 0 10rpx;
}
.debug-content {
	padding: 10rpx;
	max-height: 400rpx;
}
.debug-log {
	font-size: 22rpx;
	color: #B8B8D1;
	padding: 6rpx 0;
	border-bottom: 1px solid #2D1457;
	word-break: break-all;
}
.debug-clear {
	font-size: 24rpx;
	margin: 10rpx;
	height: 60rpx;
	line-height: 60rpx;
	background: #2D1457;
	color: #fff;
}
.debug-btn {
	margin-top: 20rpx;
	font-size: 26rpx;
	background: #18122B;
	color: #A259FF;
	height: 70rpx;
	line-height: 70rpx;
}

/* 加载动画 */
.loading-dots {
	display: flex;
	justify-content: center;
	align-items: center;
}
.dot {
	width: 12rpx;
	height: 12rpx;
	background-color: #A259FF;
	border-radius: 50%;
	margin: 0 6rpx;
	animation: bounce 1.4s infinite ease-in-out both;
}
.dot:nth-child(1) {
	animation-delay: -0.32s;
}
.dot:nth-child(2) {
	animation-delay: -0.16s;
}
@keyframes bounce {
	0%, 80%, 100% {
		transform: scale(0);
	}
	40% {
		transform: scale(1);
	}
}

</style>
